<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:pe="http://primefaces.org/ui/extensions">
  
            <style type="text/css">
.footer .ui-layout-unit-content {
   background-color: red !important;
}

.content .ui-layout-container{
overflow: auto !important;


}

#ajaxStatusPanel {
	position: absolute;
	top: 0;
	left:0;
	color: white;
	background-color: transparancy;
	padding: 0px 0px;
	font: 12px;
	font-weight: bold;
	z-index:3000000;
	width:100%;
	height:100%;
	opacity:0.9;
	filter:alpha(opacity=90);
}


</style>
   
    <ui:composition template="/templates/masterLayout.xhtml">
        <ui:define name="resources-app">
            <ui:include src="/shared/resources-app.xhtml"/>
        </ui:define>
        <ui:define name="header">
            <ui:include src="/system/header.xhtml"/>
        </ui:define>
        <ui:define name="center">
            <pe:layoutPane position="center" minWidth="200" minHeight="60" resizable="false" closable="false">
               <f:facet name="header">
                <h:outputText value="Content"/>
            </f:facet>			 				
          
    
                <p:tabView  style="border: 0" id="tabViewMenu"  rendered="true" cache="false" activeIndex="#{menuBean.tabActiveIndex}">
       <!--<p:ajax event="tabClose" listener="{menuBean.onTabClose}" /> -->
       <!--<p:ajax event="tabChange" listener="{menuBean.onChange}" />	-->
                <p:ajax event="tabClose" listener="#{menuBean.onTabClose}" partialSubmit="false"/> 
        <c:forEach items="#{menuBean.showTabs}" var="menu" varStatus="loop">
            <c:choose>
             <c:when test="#{menu.url!=null}">
                                  
            
                 <p:tab  titleStyle="border:1"  id="tab#{loop.count}"  titletip="#{menu.beanname}" title="#{menu.menuName}" closable="true" >  
                
                <ui:include src="#{menu.url}" ></ui:include> 
                
             </p:tab>     
                       </c:when>
            </c:choose> 
        </c:forEach>
                      </p:tabView> 
       
            </pe:layoutPane>
        
        <pe:layoutPane position="west" size="210" minSize="180" maxSize="500">
            <f:facet name="header">
                <h:outputText value="Menu"/>
            </f:facet>			 				
			<p:accordionPanel id="accordionMenu" value="#{menuBean.listModule}" var="modul" >
                        <p:tab title="#{modul.modulName}" >
                            <h:form>
                                <p:tree style="margin-left: -25px;width: 200px;border: 0" dynamic="true" value="#{modul.rootNode}" var="node"  selectionMode="single">
                                    <p:ajax event="select" update=":tabViewMenu" listener="#{menuBean.onNodeSelect}" ></p:ajax>
                                    <p:treeNode  expandedIcon="ui-icon-folder-open"  collapsedIcon="ui-icon-folder-collapsed" >#{node.menuName}</p:treeNode>
                                </p:tree>
                            </h:form>
                          
                        </p:tab>                       
                    </p:accordionPanel>
		</pe:layoutPane>
		</ui:define>	
        <ui:define name="footer">
            <ui:include src="/system/footer.xhtml"/>
        </ui:define>
    </ui:composition>
    
          <!--        <p:growl id="growl" showDetail="true" autoUpdate="true" sticky="true" life="1000"/> 
           
              <pe:layout fullPage="true">
                   <pe:layoutPane position="north" size="40" resizable="false" closable="false">  
        <h:graphicImage library="images" name="logo.png" styleClass="logo"/>  
        <h:outputText value="Koperasi"  
                      style="display:block; font-size:28px; position:absolute; top:16px; margin-left:100px;"/> 
               
                    <p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel">  
                        <f:facet name="start">  
                            <h:graphicImage value="resources/images/ajax-loader.gif" />  
                        </f:facet>  

                        <f:facet name="complete">  
                            <h:outputText value="" />  
                        </f:facet>  
                     </p:ajaxStatus> 
                   
                <p:toolbar >  
                    <p:toolbarGroup align="right" >  
                   <h:form>
                    
                    
                    
                    <p:commandButton id="btnUserLogin" value="#{loginBean.selectedUser.fullName}" type="button"/>
                    <p:menu position="dynamic" trigger="btnUserLogin" my="right top" at="right bottom">
                    
                        <p:menuitem value="Options..." actionListener="#{menuBean.addTab}" update=":tabViewMenu">
                             <f:param name="title" value="Option"></f:param>
                                <f:param name="id" value="1001"></f:param>
                                <f:param name="url" value="system/options.xhtml"></f:param>
                        </p:menuitem>
                        <p:menuitem value="Dashboards..." actionListener="#{menuBean.addTab}" update=":tabViewMenu">
                             <f:param name="title" value="Options"></f:param>
                                <f:param name="id" value="1002"></f:param>
                                <f:param name="url" value="system/options.xhtml"></f:param>
                        </p:menuitem>  
                        <p:menuitem value="Change Password" actionListener="#{menuBean.addTab}" update=":tabViewMenu">
                             <f:param name="title" value="Options"></f:param>
                                <f:param name="id" value="1003"></f:param>
                                <f:param name="url" value="system/options.xhtml"></f:param>
                        </p:menuitem>  
                        <p:separator/>
                        <p:menuitem action="#{loginBean.logout()}" value="Sign Out">
                             <f:param name="title" value="Options"></f:param>
                                <f:param name="id" value="options"></f:param>
                                <f:param name="url" value="system/options.xhtml"></f:param>
                        </p:menuitem>  
                    </p:menu>
                        
                       </h:form>
                </p:toolbarGroup>  
                <p:toolbarGroup align="right" >  
                   <h:form>
                       <p:commandButton actionListener="#{menuBean.addTab}"  update=":tabViewMenu" value="Dashboards">
                            
                             <f:param name="title" value="Dasboards"></f:param>
                                <f:param name="id" value="dashboard"></f:param>
                                <f:param name="url" value="system/dashboards.xhtml"></f:param>
                        </p:commandButton>
                        
                    
                       </h:form>
                </p:toolbarGroup>      
            </p:toolbar>  

                   </pe:layoutPane>>  

               <pe:layoutPane id="layoutSouth"  position="south" size="28" resizable="false" closable="false"  
                   spacing="3" statusbar="true">  
                   <h:outputText value="IP Address : " /><h:outputText value="#{loginBean.ipAddress}"/>&nbsp;&nbsp;
                   <h:outputText value="Themes : " /><h:outputText value="#{usersConfigBean.usersConfig.themes}"/>
                    
                
            </pe:layoutPane>  
<pe:layoutPane position="west" size="200" header="Left Menu" resizable="true" collapsible="true">  
   
    
                
    <p:accordionPanel id="accordionMenu" value="#{menuBean.listModule}" var="modul" >
                        <p:tab title="#{modul.modulName}" >
                            <h:form>
                                <p:tree style="margin-left: -25px;width: 200px;border: 0" dynamic="true" value="#{modul.rootNode}" var="node"  selectionMode="single">
                                    <p:ajax event="select" update=":tabViewMenu"  listener="#{menuBean.onNodeSelect}" ></p:ajax>
                                    <p:treeNode  expandedIcon="ui-icon-folder-open"  collapsedIcon="ui-icon-folder-collapsed" >#{node.menuName}</p:treeNode>
                                </p:tree>
                            </h:form>
   
                        </p:tab>                       
                    </p:accordionPanel>
                    
              
            </pe:layoutPane>  
               <pe:layoutPane id="layoutCenter" position="center" >                 
     
    <p:panel  id="mainPanel"  style="border:0;margin-left: -13px;margin-top: -10px" >
          
    
        <p:tabView  style="border: 0" id="tabViewMenu" rendered="true" cache="true" activeIndex="#{menuBean.tabActiveIndex}">
       <p:ajax event="tabClose" listener="#{menuBean.onClose}" /> 
        
        <c:forEach items="#{menuBean.showTabs}" var="menu" varStatus="loop">
            <c:choose>
             <c:when test="#{menu.url!=null}">
                                  
            
            <p:tab titleStyle="border:1" id="tab#{loop.count}" title="#{menu.menuName}" closable="true" >  
               <ui:include src="#{menu.url}" ></ui:include> 
   
                        </p:tab>     
                       </c:when>
            </c:choose> 
        </c:forEach>
                      </p:tabView> 
       </p:panel>
                   </pe:layoutPane>  
              </pe:layout>

-->
         <ui:insert name="resources-app"/>


</html>

